<style>
    h3 span {
        background:#F7F7F7;
        padding:5px 15px 5px 15px;
    }
</style>

<div class="hero-unit">
    <div class="text-center">
        <%= image_tag('tr8n_logo.png') %>
    </div>
    <h2 class="text-center"><%= tr("Welcome to Tr8n Translation Engine") %></h2>
    <p class="text-center">
        <%= tr("Tr8n Translation Engine provides you with the tools to translate your application into any numer of languages.") %>
        <%= tr("This sample application demonstrates some of Tr8n's capabilities.") %>
    </p>
    <br>
    <% unless tr8n_current_translator %>
        <p class="text-center">
            <a href="/signup" class="btn btn-large"><%= tr("Sign up to get started today") %></a>
        </p>
    <% end %>
</div>

<h3 class="hr strong"><span><%= tr("How It Works") %></span></h3>

<div class="row">
    <div class="span4">
        <p class="text-center"><%= image_tag("how_it_works_1.gif") %></p>
        <h4 class="text-center"><%= tr("Use your users") %></h4>
        <p>Your multilngual users can sign up to help translate your site into over 270 different languages. Their translations can then be viewed and voted on by other users.</p>
    </div>
    <div class="span4">
        <p class="text-center"><%= image_tag("how_it_works_2.gif") %></p>
        <h4 class="text-center"><%= tr("Share translations") %></h4>
        <p>Translations from your site get synced to our servers and can then be shared with thousands of other websites.</p>
    </div>
    <div class="span4">
        <p class="text-center"><%= image_tag("how_it_works_3.gif") %></p>
        <h4 class="text-center"><%= tr("Get what you give") %></h4>
        <p>Regularly pull down new translations from not only your users but users of other websites as you sync your translations.</p>
    </div>
</div>

<h3 class="hr strong"><span><%= tr("Features") %></span></h3>

<div class="row">
    <div class="span4">
        <h4>Support for over 250 languages</h4>
        <p>All browser supported language are included. Just choose which languages you want to enabled on your app.</p>
    </div>
    <div class="span4">
        <h4>Inline translation tools</h4>
        <p>Intuitive translation tools allow your users to easily translate your website.</p>
    </div>
    <div class="span4">
        <h4>Translation management</h4>
        <p>Keep track of all the translated text on your website, through an easy to use dashboard.</p>
    </div>
</div>

<div class="row">
    <div class="span4">
        <h4>Translation ranking system</h4>
        <p>Translators vote on translations and the best translations are used in your application.</p>
    </div>
    <div class="span4">
        <h4>Translator ranking system</h4>
        <p>Translators are ranked based on the quality of the work they do. The higher the rank the more valuable they become.</p>
    </div>
    <div class="span4">
        <h4>Powerful Metrics</h4>
        <p>Stay up to date on the progress of your translations.</p>
    </div>
</div>

<div class="row">
    <div class="span4">
        <h4>Translation Markup Language</h4>
        <p>TML syntax makes developers happy - it simplifies the code and allows to encode complex rules using simple structures.</p>
    </div>
    <div class="span4">
        <h4>Language Context Rules</h4>
        <p>Tr8n supports all language rules to make translations very accurate.</p>
    </div>
    <div class="span4">
        <h4>Language Cases</h4>
        <p>Language cases are supported across all languages to make translations sound as native as they can be.</p>
    </div>
</div>

<div class="row">
    <div class="span4">
        <h4><%= tr("Glossary") %></h4>
        <p>Create a glossary of the key terms of your application. Translators will see those terms and will be able to provide more accurate translations.</p>
    </div>
    <div class="span4">
        <h4>Language Discussion Boards</h4>
        <p>Translators can discuss translations and terms in the message boards across all languages.</p>
    </div>
    <div class="span4">
        <h4>Admin Tools</h4>
        <p>Administration tools allow you to configure every aspect of your application.</p>
    </div>
</div>

<hr>
